<template>
    <div>
        <transition-group
            enter-active-class="animated fadeInRightBig"
            leave-active-class="animated fadeOutLeftBig"
            class="list"
            tag="div"
        >
            <div
                class="item"
                v-for="(item, index) in list"
                :key="item.id"
            >
                <span>{{ item.value }}</span>
                <input type="radio" value="One" v-model="item.state">
                <label for="one">未开始</label>
                <input type="radio" value="Two" v-model="item.state">
                <label for="two">已完成</label>
                <input type="radio" value="Three" v-model="item.state">
                <label for="three">未完成</label>
                <i @click="handleClick(index)">x</i>
            </div>
        </transition-group>
    </div>
</template>

<script>

export default {
    name: "List",
    props: {
        list: {
            type: Array,
            required: true,
            default () {
                return [];
            }
        }
    },
    data() {
        return {}
    },
    methods: {
        handleClick (ind) {
            this.$emit("delData", ind);
        }
    }
}
</script>

<style lang="scss" scoped>
@import url(https://cdn.bootcss.com/animate.css/3.7.0/animate.css);
.list {
    width: 500px;
    margin: 20px auto;
    
    .item {
        height: 40px;
        display: flex;
        line-height: 40px;
        background: #F5F5F5;
        margin-bottom: 10px;
        align-items: center;
        
        span{
            flex: 1;
            text-align: left;
            padding: 0 10px;
        }

        .stat {
            height: 30px;
        }
        
        i{
            width: 40px;
            height: 40px;
            text-align: center;
            cursor: pointer;
        }
    }
}
</style>
